<template>
  <div class="cardbag">
  <!--第一部分-->
    <div class="cartit">
      <div class="title"><span class="iconfont icon-iconfontjiantouzuo"></span></div>
      <div class="titri"><span>我的优惠券</span></div>
    </div>
    <!--第二部分-->
    <div class="tips">
      <span>!!!有一张券即到期<a href="javascript:;">点击查看</a></span>
    </div>
    <!--优惠券部分-->
    <div class="carlist">
      <ul>
        <li :key="i" v-for="(item,i) in cardList">
          <div class="cone">
            <div class="money"><span class="monl"></span><span class="monr">{{item.couponValue}}</span>{{item.couponType==true?"￥":"折"}}</div>
            <p>{{item.couponDoor}}{{item.couponType==true?"元起可用":"元上限"}}</p>
          </div>
          <div class="ctwo">
            <div class="twoa"><span>{{item.couponType==true?"满减券":"折扣券"}}</span></div>
            <div class="twob"><span>2020-03-17至2020-04-16</span></div>
            <div class="twoc"><span>使用详情<span class="iconfont icon-xiajiantou_huaban"></span></span></div>
          </div>
          <div class="cthree">
            <div class="overdue"><span @click="delcoupon(item.cuId)">x</span></div>
            <div class="thbtn"><div class="thh">去使用</div></div>
          </div>
        </li>


      </ul>
    </div>
    <!--底部导航-->
    <div class="tail">
      <span><a href="../coupon">领券中心</a></span>
      <span>|</span>
      <span><a href="javascript:;">历史优惠券</a></span>

    </div>

  </div>
</template>
<script>
  export  default{
      data(){
          return{
              msg:1,
              cardList:[]
          }
      },
      methods:{
          delcoupon(id){
              console.log(id);
              this.axios({
                  method:'get',
                  url:'http://115.28.137.176:8098/coupon/couponUse',
                  params:{

                      "id":id
                  }
              }).then((res)=>{
                  this.cardList=res.data.data;
                  console.log(this.cardList)
              }).catch(()=>{

              });
              window.location.reload();//点击删除的同时 刷新这个页面
          }
      },
      created(){
          this.axios({
              method:'get',
              url:'http://115.28.137.176:8098/coupon/userCouponSelect?id=1',
              data:{
              }
          }).then((res)=>{
              this.cardList=res.data.data;
              console.log(this.cardList)
          }).catch(()=>{

          })
      }

  }

</script>


<style lang="less">
  @baseFontSize:20px;
  @baseSize:20;
  @beijing:#ffffff;
  @ziti:#242424;
  @ziti2:#232323;
  html{
    font-size: @baseFontSize;
  }

  a{
    text-decoration:none
  }
  .px2rem(@name,@px){
      @{name}:@px / @baseSize /2 * 1rem;
  }
  /*/2  /3 是根据设计师给你的是几倍图来定的*/

.cardbag{
  .px2rem(width,750);
  background:@beijing;
  .cartit{
    .px2rem(width,750);
    .px2rem(height,35);
    .px2rem(font-size,35);
    .px2rem(margin-top,20);
    display: flex;
    .title{
       .px2rem(margin-left,30)
    }
    .titri{
      .px2rem(margin-left,240)
    }
  }
  .tips{
    .px2rem(width,750);
    .px2rem(height,70);
    .px2rem(margin-top,20);
    background: #fffac3;
    color: #f89673;
    display: flex;
    align-items: center;
    span{
      .px2rem(margin-left,30);
      a{
        .px2rem(font-size,33)
      }
    }
  }
  .carlist{
    .px2rem(width,750);
    position: absolute;
    height:100%;
    background: #f5f5f5;
    ul{
      .px2rem(width,750);
      background: #f5f5f5;
      li{
        .px2rem(width,710);
        .px2rem(height,190);
        .px2rem(margin-top,15);
        .px2rem(margin-left,20);
        .px2rem(text-indent,4);
        background:@beijing;
        display: flex;
        .cone{
          .px2rem(width,220);
          .px2rem(height,190);
          border-radius: 6px 0 0 6px;
          background: #f6ae38;
          color: @beijing;
          display: flex;
          flex-direction:column;
          justify-content: center;
          p{
            display: flex;
            justify-content: center;
            .px2rem(font-size,30);
            .px2rem(margin-top,15)
          }
          .money{
            display: flex;
            justify-content: center;
            align-items: center;
            .monl{
              .px2rem(font-size,24)
            }
            .monr{
              .px2rem(font-size,50)
            }
          }
        }
        .ctwo{
          .px2rem(width,375);
          .px2rem(height,190);

          .twoa{
            .px2rem(width,350);
            .px2rem(height,80);
            .px2rem(font-size,35);
            .px2rem(margin-left,25);
            display: flex;
            align-items: center;
            span{
              font-weight: bold;
            }
          }
          .twob{
            .px2rem(width,350);
            .px2rem(height,55);
            .px2rem(font-size,20);
            display: flex;
            align-items: center;
            color: #444444;
            .px2rem(margin-left,25);
            border-bottom: dashed #b0b0b0 1.5px;

          }
          .twoc{
            .px2rem(width,350);
            .px2rem(height,55);
            .px2rem(font-size,28);
            display: flex;
            align-items: center;
            .px2rem(margin-left,25);
          }
        }
        .cthree{
          .px2rem(width,115);
          .px2rem(height,190);
          background: @beijing;
          .overdue{
            .px2rem(width,115);
            .px2rem(height,80);
            .px2rem(font-size,60);
            display: flex;
            align-items: center;justify-content: flex-end ;
            span{
              .px2rem(margin-top,-19);
            }
          }
          .thbtn{
            .px2rem(width,115);
            .px2rem(height,55);
            border-bottom: dashed #b0b0b0 1.5px;
            .px2rem(font-size,28);
            display: flex;
            font-weight: bold;
            align-items: center;
            .thh{
              .px2rem(width,105);
              color: @beijing;
              background:#da281c;
              border-radius: 2em 2em 2em 2em;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .tail{
    .px2rem(width,740);
    .px2rem(height,100);
    position: fixed;
    .px2rem(bottom,0);
    bottom: 0;
    background: @beijing;
    display:flex;

    align-items: center;
    span{
      display: flex;
      justify-content: center;
      flex: 1;
      .px2rem(font-size,38);
      font-weight: bold;
      a{
        color: @ziti;
      }
    }
  }
}

</style>
